我們總是和時間賽跑，卻忘記了沿途的風景有多美好。

前幾篇介紹了許多 Vue 專屬的內建指令用法，這裡要介紹最後幾個也會常用到的內建指令ref、v-cloak和v-once
先來 codepen 看看：Vue.Js ref 唯一識別與 v-cloak 隱藏表達式

ref 元素的唯一識別

給需要一個標籤一個唯一識別，可用ref，但如何透過我們給標籤的ref取得標籤的內容，在實例的方法裡，可以使用$refs這個方法取得：this.$refs.content.textContent，可選用innerText或者是textContent效果是一樣的。

ref的作用是為某個元素註冊一個唯一標識, vue 物件會透過 $refs 屬性來訪問這個元素物件或其內容。

參考：API — Vue.js ref

v-cloak 防止在頁面出現 Vue 的表達式

因為程式是一行行執行的，有時因為頁面跳轉的關係，程式還沒讀取完即出現在頁面上，這時 Vue 的表達式像是{{ 表達式 }}就會被看見，為了避免這樣的狀況產生，可以使用在標籤上使用v-cloak，並在 Style 以屬性選擇器[v-cloak]選取，並給予display:none先隱藏它，直到程式讀取到資料後，這個屬性會自動地被拿掉，就可預防出現 Vue 的表達式。
HTML 部分

來看看使用ref和v-cloak的範例

<p ref="content">Hello Paris</p>
<button @click="hint">Hint</button>
<!-- v-cloak -->
<p v-cloak>Hello Taipei</p>

JavaScript 部分

const vm = new Vue({
  el: '#app',
  data: {
    msg: 'Hello Taipei',
  },
  methods: {
    hint() {
      alert(this.$refs.content.textContent);
      alert(this.$refs.content.innerText);
    },
  },
});

參考：API — Vue.js v-cloak

v-once 只渲染元素和元件一次

有些元素在頁面中並不需要每次都渲染，如果使用v-once，Vue 就只會渲染元素和元件一次，之後如果重新渲染，元素/元件及其所有 DOM Tree 的子節點就會被視為靜態的內容並略過，這樣可以有助於優化效能。
HTML 部分

<div id="app">
    <div v-once>
        {{content}}
    </div>
</div>

JavaScript 部分

const app = new Vue({
  el: '#app',
  data: {
    content: '第一次的文字內容',
  },
});
// 第二次給值渲染
app.content = '第二次的文字更新';

以上的範例即使使用app.content再次選染，但值還是會是第一次被選染的值，因為渲染一次之後就會被當成靜態元素處理。

參考：API — Vue.js v-once

每日一句法文有益身心：J'ai faim ! --> 姐.放！ --> 我餓了！